import React, { useMemo } from 'react';
import { Cascader } from 'antd';
import { SchemaManageAPI } from '../../type';
import '../../styles.less';
interface IPropsType {
  id?: string;
  value?: any;
  onChange?: any;
  opt: SchemaManageAPI.ISearchList;
  type: string;
}

// interface Option {
//   value: string | number;
//   label: string;
//   children?: Option[];
// }

export const SearchCascader: React.FC<IPropsType> = (props) => {
  const CascaderData = useMemo(() => {
    let loopTree = (dataTree: any) => {
      return (
        dataTree &&
        dataTree.map((item: any) => {
          return {
            value: item?.id,
            label: item?.text,
            children:
              item?.children && item?.children?.length > 0
                ? loopTree(item.children)
                : null,
          };
        })
      );
    };
    return loopTree(props?.opt?.dataSource);
  }, [props?.opt?.dataSource]);

  return (
    <div className="searchCascaderBox">
      <Cascader
        className="scroll-layout"
        options={CascaderData}
        onChange={props?.onChange}
        placeholder={props?.opt?.placeholder}
        value={props?.value}
        changeOnSelect
      />
    </div>
  );
};
